<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        hello 
        <p>你好 世界</p>
        world
    </div>

    <input type="text" value="张三">
    <script>
        /* 
            1.innerHTML
                读
                    语法: 元素.innerHTML
                    返回: 以字符串的形式给到改元素下面
                    所有的内容(包含超文本(标签))
                写
                    语法: 元素.innerHTML = '值'
                    完全覆盖以前的 
                    html可以解析html的标签(超文本 )

            2.innerText
                读
                    语法: 元素.innerText
                    返回: 以字符串的形式给到该元素下面
                    所有的内容(不包含超文本(标签))
                写
                    语法: 元素.innerText = '值'
                    完全覆盖以前的 
                    不解析html的标签(超文本 )


            3.value
                 专门用来操作表单的
                 读: 
                    语法:元素.value  
                    得到表单value的值
        
                 写: 
                    语法:元素.value  = '值'
                    覆盖以前的内容 
        
        
        
        
        
        */


        // 获取元素

        var divEle = document.querySelector('div');
        var input =  document.querySelector('input');


        // innerHTML


        // 读 
        // console.log(divEle.innerHTML);
        /* 
         hello 
        <p>你好 世界</p>    结果中有p标签
        world
        
        */

        // 写 

        // divEle.innerHTML = '<h1>哈哈</h1>';
        // 完全覆盖以前的内容 
        // 解析h1标签 

        // innerText 

        // 读

        

        // console.log(divEle.innerText);
        /* 
        hello

`       你好 世界

        world
        
        */
        // 写
        // divEle.innerText = '<h1>哈哈</h1>';
        // 覆盖以前内容 
        // h1标签原样显示  



        //value 
        // console.log(input.value);

        // 写 
        // input.value = '李四爱王五';

    </script>
</body>
</html>